<template>
  <div class="PhotovoSurveybox">
    <div class="topbox">
      <div class="littlebox">
        <div clacc="image"><img src="../../../../assets/energy-consumption/GeneralSituation/yonghu.png" alt=""> </div>
        <div class="select">
          <div class="dis">
            <span class="title">电站</span>
          </div>
          <div class="numand"><span class="num">{{ entityvalue.powerSystemCount }}</span> <span class="danwei">(个)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div clacc="image"><img src="../../../../assets/energy-consumption/GeneralSituation/rongliang.png" alt=""> </div>
        <div class="rightlittle">
          <div class="title">装机容量</div>
          <div class="numand"><span class="num">{{ parseInt(entityvalue.installedCapacity)?parseInt(entityvalue.installedCapacity):0 }}</span> <span class="danwei">(kVA)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div clacc="image"><img src="../../../../assets/energy-consumption/GeneralSituation/tanpai.png" alt=""> </div>
        <div class="rightlittle">
          <div class="title">累计减少碳排</div>
          <div class="numand"><span class="num">{{ parseInt(entityvalue.cumulativeReductionCarbon)?parseInt(entityvalue.cumulativeReductionCarbon):0 }}</span> <span class="danwei">(吨)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div clacc="image"><img src="../../../../assets/energy-consumption/GeneralSituation/riyong.png" alt=""> </div>
        <div class="rightlittle">
          <div class="title">日发电量</div>
          <div class="numand"><span class="num">{{ parseInt(entityvalue.dailyGeneration)?parseInt(entityvalue.dailyGeneration):0 }}</span> <span class="danwei">(kWh)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div clacc="image"><img src="../../../../assets/energy-consumption/GeneralSituation/yueyong.png" alt=""> </div>
        <div class="rightlittle">
          <div class="title">月发电量</div>
          <div class="numand"><span class="num">{{ parseInt(entityvalue.monthlyGeneration)?parseInt(entityvalue.monthlyGeneration):0 }}</span> <span class="danwei">(kWh)</span></div>
        </div>
      </div>
      <div class="littlebox">
        <div clacc="image"><img src="../../../../assets/energy-consumption/GeneralSituation/nianyong.png" alt=""> </div>
        <div class="rightlittle">
          <div class="title">年发电量</div>
          <div class="numand"><span class="num">{{ parseInt(entityvalue.annualGeneration)?parseInt(entityvalue.annualGeneration):0 }}</span> <span class="danwei">(kWh)</span></div>
        </div>
      </div>
    </div>
        <!-- 中间地图盒子 -->
     <div class="modalbox">
      <MiddleBox></MiddleBox>
     </div>
     <!-- 底部图表盒子 -->
      <div class="footerbox">
        <FooterBox :entityvalue="entityvalue"></FooterBox>
      </div>
  </div>
</template>

<script>
import {getguangfugaikuangapi} from '@/api/Photovoltaic/SystemHeught/PhotovoSurvey'
import MiddleBox from './middle.vue'
import FooterBox from './footer.vue'
export default {
  name: 'CallPoliceIndex',
  components:{
    MiddleBox,
    FooterBox
  },
  data() {
    return {
      entityvalue:{}
    };
  },

  async mounted() {
    const { data: { entity } } = await getguangfugaikuangapi()
    this.entityvalue=entity
  },

  methods: {
    
  },
};
</script>

<style scoped>
.PhotovoSurveybox{
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .topbox{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-column-gap: 10px;
    justify-content: space-between;
    height: 11%;
    margin-bottom: 10px;
    .littlebox{
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 10px;
      .image{
        width: 60px;
      }
      .rightlittle{
        margin-left: 10px;
      }
      .select{
        flex:1;
        margin-left: 10px;
        .dis{
          display: flex;
          justify-content: space-between;
        }
      }
      .title{
        font-size: 14px;
        color: #646464;
      }
      .num{
        font-size: 24px;
        color: #323232;
      }
      .danwei{
        font-size: 16px;
        color: #646464;
      }
    }
  }
  .modalbox{
    height: 59%;
    margin-bottom: 10px;
  }
  .footerbox{
   flex:1;
   overflow: hidden;
  }
}
</style>